<template>
  <div class="process-detail-management">
    <h2>流程详情管理</h2>

    <div class="toolbar">
      <div class="search-filters">
        <input 
          v-model="searchParams.processCode" 
          placeholder="流程编号" 
          class="search-input"
        />
        <input 
          v-model="searchParams.approverCode" 
          placeholder="审批人编号" 
          class="search-input"
        />
        <select v-model="searchParams.state" class="search-select">
          <option value="">全部状态</option>
          <option value="0">待审批</option>
          <option value="1">已通过</option>
          <option value="2">已拒绝</option>
          <option value="4">已转批</option>
          <option value="6">已完成</option>
        </select>
        <button @click="loadProcessDetails" class="search-btn">搜索</button>
        <button @click="resetSearch" class="reset-btn">重置</button>
      </div>
    </div>

    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>流程详情编号</th>
          <th>流程编号</th>
          <th>节点编号</th>
          <th>节点名称</th>
          <th>审批人编号</th>
          <th>审批人姓名</th>
          <th>审批类型</th>
          <th>审批状态</th>
          <th>状态描述</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="detail in processDetails" :key="detail.processDetailId">
          <td>{{ detail.processDetailId }}</td>
          <td>{{ detail.processDetailCode }}</td>
          <td>{{ detail.processCode }}</td>
          <td>{{ detail.nodeCode }}</td>
          <td>{{ detail.nodeName || '-' }}</td>
          <td>{{ detail.approverCode }}</td>
          <td>{{ detail.approverName || '-' }}</td>
          <td>{{ detail.typeName || detail.typeCode || '-' }}</td>
          <td>{{ detail.state }}</td>
          <td>{{ detail.stateDescription || '-' }}</td>
          <td>{{ formatDate(detail.createdAt) }}</td>
          <td>
            <button @click="viewDetail(detail)" class="view-btn">查看</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 分页 -->
    <div class="pagination">
      <button 
        @click="changePage(pagination.pageIndex - 1)" 
        :disabled="pagination.pageIndex <= 1"
        class="page-btn"
      >
        上一页
      </button>
      <span class="page-info">
        第 {{ pagination.pageIndex }} 页，共 {{ pagination.totalPage }} 页
        （共 {{ pagination.totalCount }} 条记录）
      </span>
      <button 
        @click="changePage(pagination.pageIndex + 1)" 
        :disabled="pagination.pageIndex >= pagination.totalPage"
        class="page-btn"
      >
        下一页
      </button>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="detailDialog.visible" class="dialog-mask">
      <div class="dialog" style="width: 600px;">
        <h3>流程详情信息</h3>
        <div v-if="selectedDetail" class="detail-content">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-row">
              <span class="label">流程详情编号：</span>
              <span class="value">{{ selectedDetail.processDetailCode }}</span>
            </div>
            <div class="detail-row">
              <span class="label">流程编号：</span>
              <span class="value">{{ selectedDetail.processCode }}</span>
            </div>
            <div class="detail-row">
              <span class="label">节点编号：</span>
              <span class="value">{{ selectedDetail.nodeCode }}</span>
            </div>
            <div class="detail-row">
              <span class="label">节点名称：</span>
              <span class="value">{{ selectedDetail.nodeName || '-' }}</span>
            </div>
            <div class="detail-row">
              <span class="label">上一节点：</span>
              <span class="value">{{ selectedDetail.lastNodeCode || '-' }}</span>
            </div>
            <div class="detail-row">
              <span class="label">下一节点：</span>
              <span class="value">{{ selectedDetail.nextNodeCode || '-' }}</span>
            </div>
          </div>

          <div class="detail-section">
            <h4>审批信息</h4>
            <div class="detail-row">
              <span class="label">审批人编号：</span>
              <span class="value">{{ selectedDetail.approverCode }}</span>
            </div>
            <div class="detail-row">
              <span class="label">审批人姓名：</span>
              <span class="value">{{ selectedDetail.approverName || '-' }}</span>
            </div>
            <div class="detail-row">
              <span class="label">审批类型：</span>
              <span class="value">{{ selectedDetail.typeName || selectedDetail.typeCode || '-' }}</span>
            </div>
            <div class="detail-row">
              <span class="label">审批状态：</span>
              <span class="value">{{ selectedDetail.stateDescription || selectedDetail.state || '-' }}</span>
            </div>
            <div class="detail-row">
              <span class="label">审批编号：</span>
              <span class="value">{{ selectedDetail.approveCode || '-' }}</span>
            </div>
            <div class="detail-row">
              <span class="label">备注：</span>
              <span class="value">{{ selectedDetail.produce || '-' }}</span>
            </div>
          </div>

          <div class="detail-section">
            <h4>时间信息</h4>
            <div class="detail-row">
              <span class="label">创建时间：</span>
              <span class="value">{{ formatDate(selectedDetail.createdAt) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">创建人：</span>
              <span class="value">{{ selectedDetail.createdBy || '-' }}</span>
            </div>
            <div class="detail-row" v-if="selectedDetail.lastModifiedAt">
              <span class="label">最后修改：</span>
              <span class="value">{{ formatDate(selectedDetail.lastModifiedAt) }}</span>
            </div>
            <div class="detail-row" v-if="selectedDetail.lastModifiedBy">
              <span class="label">修改人：</span>
              <span class="value">{{ selectedDetail.lastModifiedBy }}</span>
            </div>
          </div>
        </div>
        <div class="dialog-actions">
          <button @click="detailDialog.visible = false" class="close-btn">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { examineApi } from '@/api'

// 类型定义
type ProcessDetail = {
  processDetailId: number
  processDetailCode: string
  processCode: string
  nodeCode: string
  nodeName?: string
  lastNodeCode?: string
  nextNodeCode?: string
  approverCode: string
  approverName?: string
  typeCode: string
  typeName?: string
  state?: number
  stateDescription?: string
  produce?: string
  approveCode?: string
  createdAt?: string
  createdBy?: string
  lastModifiedAt?: string
  lastModifiedBy?: string
}

// 响应式数据
const processDetails = ref<ProcessDetail[]>([])
const selectedDetail = ref<ProcessDetail | null>(null)

const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  totalPage: 0
})

const searchParams = reactive({
  processCode: '',
  approverCode: '',
  state: ''
})

const detailDialog = reactive({
  visible: false
})

// 生命周期
onMounted(() => {
  loadProcessDetails()
})

// 方法
async function loadProcessDetails() {
  try {
    const params = {
      pageindex: pagination.pageIndex,
      pageSize: pagination.pageSize,
      ...searchParams
    }
    
    const res = await examineApi.getProcessDetailList(params)
    console.log('流程详情列表API响应:', res)
    
    const data = res.data?.data
    if (data) {
      processDetails.value = data.data || []
      pagination.totalCount = data.totalCount || 0
      pagination.totalPage = data.totalPage || 0
    }
  } catch (e) {
    console.error('加载流程详情失败', e)
  }
}

function resetSearch() {
  searchParams.processCode = ''
  searchParams.approverCode = ''
  searchParams.state = ''
  pagination.pageIndex = 1
  loadProcessDetails()
}

function changePage(page: number) {
  if (page >= 1 && page <= pagination.totalPage) {
    pagination.pageIndex = page
    loadProcessDetails()
  }
}

function viewDetail(detail: ProcessDetail) {
  selectedDetail.value = detail
  detailDialog.visible = true
}

function formatDate(dateString?: string) {
  if (!dateString) return '-'
  try {
    return new Date(dateString).toLocaleString('zh-CN')
  } catch {
    return dateString
  }
}
</script>

<style scoped>
.process-detail-management {
  padding: 16px;
}

.toolbar {
  margin-bottom: 16px;
}

.search-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input, .search-select {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.search-input {
  width: 150px;
}

.search-select {
  width: 120px;
}

.search-btn, .reset-btn {
  padding: 6px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.search-btn {
  background: #1890ff;
  color: white;
  border-color: #1890ff;
}

.reset-btn {
  background: white;
  color: #666;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  margin-bottom: 16px;
}

.table th, .table td {
  border: 1px solid #eaeaea;
  padding: 8px;
  text-align: left;
  font-size: 12px;
}

.table th {
  background: #fafafa;
  font-weight: 600;
}

.view-btn {
  padding: 4px 8px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  background: white;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
}

.dialog-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
}

.dialog h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.detail-content {
  margin-bottom: 16px;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 8px;
}

.detail-row {
  display: flex;
  margin-bottom: 8px;
  align-items: flex-start;
}

.detail-row .label {
  width: 120px;
  color: #666;
  font-weight: 500;
  flex-shrink: 0;
}

.detail-row .value {
  flex: 1;
  color: #333;
  word-break: break-all;
}

.dialog-actions {
  text-align: right;
  border-top: 1px solid #eaeaea;
  padding-top: 16px;
}

.close-btn {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
